﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAnimation.aspx.cs"
    Inherits="CSharpLearningWeb.Jquery.JqueryAnimation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .toggler
        {
            width: 500px;
            height: 200px;
            position: relative;
        }
        #button
        {
            padding: .5em 1em;
            text-decoration: none;
        }
        #effect
        {
            position: relative;
            width: 240px;
            padding: 1em;
            letter-spacing: 0;
            font-size: 1.2em;
            border: 1px solid #000;
            background: #eee;
            color: #333;
        }
        .newClass
        {
            text-indent: 40px;
            letter-spacing: .4em;
            width: 410px;
            height: 100px;
            padding: 30px;
            margin: 10px;
            font-size: 1.6em;
        }
    </style>
    <script src="../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tbl').delegate('input', 'click', function () {
                var tr = $(this).parents('tr:first');
                tds = tr.find('td');
                l = tds.length;

                tds.fadeOut('slow', function () {
                    if (! --l) {
                        tr.remove();
                        alert('ajax');
                    }
                });

                return false;
            });

            $('#btnAppend').click(function () {
                var tr = $('#tbl').parents('tr:first');
                tds = tr.find('td');
                l = tds.length;
                tds.fadeIn('slow', function () {
                    if (! --l) {
                        $('#tbl').append("<tr><td>one</td><td>two</td><td>three</td><td><input type='button' value='button' /></td></tr>");
                    }
                });
            });
            $("#button").click(function () {
                $("#effect").toggleClass("newClass", 1000);
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="toggler">
        <div id="effect" class="newClass ui-corner-all">
            Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
        </div>
    </div>
    <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
    <input id="btnAppend" type="button" value="button" />
    <table id="tbl">
        <tr>
            <td>
                one
            </td>
            <td>
                two
            </td>
            <td>
                three
            </td>
            <td>
                <input id="Button1" type="button" value="button" />
            </td>
        </tr>
        <tr>
            <td>
                one
            </td>
            <td>
                two
            </td>
            <td>
                three
            </td>
            <td>
                <input id="Button2" type="button" value="button" />
            </td>
        </tr>
        <tr>
            <td>
                one
            </td>
            <td>
                two
            </td>
            <td>
                three
            </td>
            <td>
                <input id="Button3" type="button" value="button" />
            </td>
        </tr>
    </table>
    ​
    </form>
</body>
</html>
